<template>
  <div class="exchangeRecord">
    <HeaderComponent title="兑换记录" background='#18235b' color='#ffffff' image_='1' size='4.8vw' />
    <!-- <div class="exchange_title">兑换记录</div> -->
    <div :class="index=='0'?'exreco exreco_':'exreco'" v-for="(item, index) in infoList" :key="index">
      <div class="image_header">
        <div>
          <img :src="item.icon" alt="" />
        </div>
        <div class="title_name">
          <span>{{ item.name }}</span>
          <span>{{ item.create_time }}</span>
        </div>
      </div>
      <div class="title_image">
        <span>-{{ item.need_gold }}</span>
        <img v-if="item.type == '1'" :src="require('@/assets/images/playrules/zuanban.png')" alt="" />
        <img v-else :src="require('@/assets/images/playrules/gift.png')" alt="" />
      </div>
    </div>
    <!-- <li v-if="loading_" @click="homePage">点击加载更多</li> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { lotteryExchangelist } from '@/api/user'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
export default defineComponent({
    components: {
        HeaderComponent
    },
    setup () {
        const infoList = ref<Array<any>>([])
        const homePage = async (): Promise<void> => {
            const dataRes = await lotteryExchangelist({})
            infoList.value = dataRes.data.result
        }
        homePage()
        return {
            infoList
        }
    }
})
</script>

<style lang="less" scoped>
@import './ExchangeRecord.less';
</style>